<template>
    <div class="hotspot-icon h-full">
        <el-form :inline="true" :model="searchform">
            <div class="flex justify-between mb-3">
                <el-space>
                    <el-button size="default" type="primary" :icon="Plus" @click="openEdit('add')">新增</el-button>
                    <el-button type="danger" :icon="Delete" @click="openEdit('add')">删除</el-button>
                </el-space>

                <el-space>
                    <el-input v-model="searchform.name" placeholder="请输入用户名或姓名" clearable style="width:200px;"/>
                    <el-button type="primary" @click="getList" :icon="Search">查询</el-button>
                </el-space>
            </div>
        </el-form>
        <div class="table-section grid">
            <el-table border :data="tableData">
                <el-table-column prop="id" label="用户id" width="80px"/>
                <el-table-column prop="avatar" label="头像" width="80px">
                    <template #default="scope">
                        <img class="rounded-md" :src="(scope.row.avatar|| defaultAvatar)" style="height: 50px;width:auto"/>
                    </template>
                </el-table-column>
                <el-table-column prop="username" label="用户名称"/>
                <el-table-column prop="realname" label="真实名称"/>
                <el-table-column prop="mobile" label="手机号码"/>
                <el-table-column prop="mail" label="邮箱"/>
                <el-table-column prop="create_time" label="创建时间"/>
                <el-table-column prop="action" label="操作" fixed="right" width="200px">
                    <template #default="scope">
                        <el-button type="primary" plain @click="openEdit('update',scope.row)">编辑</el-button>
                        <el-button type="danger" plain>删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>

    <!--  添加项目弹框  -->
    <el-dialog v-model="editData.visible" :title="editData.title" center :show-close="false" width="50%" top="10vh" :close-on-click-modal="false">
        <div class="dialog-content">
            <div class="edit-form">
                <el-form :model="editData.form" label-width="auto" style="width:100%" ref="formRef" :rules="editData.rules">
                    <el-row :gutter="50">
                        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                            <el-form-item label="用户头像" prop="avatar">
                                <upload-img v-model="editData.form.avatarUrl" :aspect-ratio="1" mode="single"></upload-img>
                            </el-form-item>
                        </el-col>

                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                            <el-form-item label="用户名称" prop="username">
                                <el-input v-model="editData.form.username" placeholder="请输入用户名称" clearable/>
                            </el-form-item>
                        </el-col>

                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                            <el-form-item label="真实名称" prop="realname">
                                <el-input v-model="editData.form.realname" placeholder="请输入真实名称" clearable/>
                            </el-form-item>
                        </el-col>

                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                            <el-form-item label="登录密码" prop="password">
                                <el-input v-model="editData.form.password" placeholder="请输入登录密码" type="password" clearable/>
                            </el-form-item>
                        </el-col>

                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                            <el-form-item label="手机号码" prop="mobile">
                                <el-input v-model="editData.form.mobile" placeholder="请输入手机号码" clearable/>
                            </el-form-item>
                        </el-col>

                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                            <el-form-item label="邮箱地址" prop="mail">
                                <el-input v-model="editData.form.mail" placeholder="请输入邮箱地址" clearable/>
                            </el-form-item>
                        </el-col>

                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                            <el-form-item label="关联角色" prop="role_id">
                                <el-select v-model="editData.form.role_id" placeholder="请选择角色" multiple style="width: 100%">
                                    <el-option v-for="item in roleOptions" :key="item.id" :label="item.role_name" :value="item.id"/>
                                </el-select>
                            </el-form-item>
                        </el-col>

                        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                            <el-form-item label="启用状态" prop="status">
                                <el-switch v-model="editData.form.status"/>
                            </el-form-item>
                        </el-col>
                    </el-row>

                </el-form>
            </div>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="editData.visible = false">取消</el-button>
                <el-button type="primary" @click="submitForm">确定</el-button>
            </div>
        </template>
    </el-dialog>

</template>
<script setup>
import { ref, reactive, nextTick } from 'vue'
import { Delete, Edit, Search, Share, Plus } from '@element-plus/icons-vue'

import CompUploadImg from '@/components/comp-upload-img/index.vue'
import UploadImg from 'components/comp-upload/upload-img.vue'
import userApi from 'api/model/user.js'

import defaultAvatar from './img/avatar.png'

const tableData = ref([])

const searchform = reactive({
    name: '',
})

const editData = reactive({
    type: 'add',
    visible: false,
    form: {
        id: '',
        avatar: '',
        username: '',
        realname: '',
        password: '',
        mobile: '',
        mail: '',
        status: true,
        role_id: ''
    },
    rules: {
        username: [
            { required: true, message: '请输入用户名称', trigger: 'blur' },
            { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        realname: [
            { required: true, message: '请输入真实名称', trigger: 'blur' },
            { min:2, max: 20, message: '长度在 2 到 10 个字符', trigger: 'blur' }
        ],
        password: [
            { required: true, message: '请输入登录密码', trigger: 'blur' },
            { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
        ],
        mobile: [
            { required: true, message: '请输入手机号码', trigger: 'blur' },
            { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
        ],
        mail: [
            { required: true, message: '请输入邮箱地址', trigger: 'blur' },
            {
                pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
                message: '请输入正确的邮箱地址',
                trigger: 'blur'
            }
        ]
    }
})

// 项目表单ref 对象
const formRef = ref()

function openEdit (type, item) {
    editData.title = type === 'add' ? '新增类型' : '编辑类型'
    editData.visible = true
    editData.type = type
    nextTick(() => {
        formRef.value.resetFields()
        if (type === 'update') {
            const { id, username, realname, avatar, mobile, mail, status } = item || {}
            editData.form.id = id
            editData.form.username = username
            editData.form.realname = realname
            editData.form.avatar = avatar
            editData.form.mobile = mobile
            editData.form.mail = mail
            editData.form.status = status
            editData.form.password = ''
            editData.form.role_id = item.role_id.split(',').map(item => Number(item))
        }
    })
}

/**
 * 图片上传成功回调
 * @param data
 */
function uploadChange (data) {
    editData.form.avatar = data
}

/**
 * 提交表单
 */
function submitForm () {
    formRef.value.validate(async valid => {
        if (!valid) return
        editData.type === 'add' ? addItem() : updateItem()
    })
}

/**
 *  获取类型列表
 */
async function getList () {
    const { code, data = [] } = await userApi.list.get({
        username: searchform.name,
        mobile: searchform.mobile
    })
    if (code === 0) {
        tableData.value = data
    }
}

/**
 *  新增类型
 */
async function addItem () {
    const { code, data = [] } = await userApi.add.post(editData.form)
    if (code === 0) {
        ElMessage.success('新增成功')
        editData.visible = false
        getList()
    }
}

/**
 *  新增类型
 */
async function updateItem () {
    const { code, data = [] } = await userApi.update.post({
        ...editData.form
    })
    if (code === 0) {
        editData.visible = false
        getList()
        ElMessage.success('编辑成功')
    }
}

/******************************* 角色相关 *******************************/

import roleApi from 'api/model/role.js'

const roleOptions = ref([])

/** 获取表格列表 **/
async function getRoleList () {
    const { code, data = [] } = await roleApi.list.get()
    if (code === 0) {
        roleOptions.value = data
    }
}

getList()
getRoleList()


</script>


<style lang="less">
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
    width: 100px;
    height: 100px;

    img {
        width: auto;
        height: 100%;
    }
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    text-align: center;
}
</style>